<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-11 16:06:02
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2025-01-10 14:00:50
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\views\system\user\components\EditUser.vue
 * @Description: 新增/编辑用户
-->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useRequest } from 'vue-hooks-plus'
import formateDate from '@/utils/formateDate'
import { identityCodeList } from  "@/utils/typeList"
import { createAccountReq, updateAccountReq } from "@/api/system/user/index"

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  editType: {
    type: Number, // 0-查看，1-新增，2-编辑
    default: 0
  },
  curItem: {
    type: Object,
    default: {}
  },
  titleList: { // 职称
    type: Object,
    default: {}
  },
  roleList: { // 角色
    type: Object,
    default: {}
  },
  departmentList: { // 学院/部
    type: Object,
    default: {}
  },
  subjectList: { // 一级学科
    type: Object,
    default: {}
  },
  positionTypeList: { // 岗位类型
    type: Object,
    default: {}
  },
  positionLevelList: { // 岗位级别
    type: Object,
    default: {}
  },
  educationNameList: { // 学历
    type: Object,
    default: {}
  },
  academicNameList: { // 学位
    type: Object,
    default: {}
  }
})
const emits = defineEmits(['close'])

const formRef = ref()
const form = ref<any>({
  inside: props.curItem?.inside === false ? false : true,
  name: props.curItem?.name || '',
  phone: props.curItem?.phone || null,
  code: props.curItem?.code || '',
  code2: props.curItem?.code || '',
  idcard: props.curItem?.idcard || null,
  email: props.curItem?.email || '',
  roleIds: props.curItem?.accountRoleList.map((v) => v.roleId) || [],
  identityCode: props.curItem?.identityCode || null,
  departmentId: props.curItem?.departmentId || '',
  departmentId2: props.curItem?.departmentId || '',
  titleId: props.curItem?.titleId || '',
  positionTypeId: props.curItem?.positionTypeId || '',
  positionLevelId: props.curItem?.positionLevelId || '',
  subjectId: props.curItem?.subjectId || '',
  organizationName: props.curItem?.organizationName || '',
  direction: props.curItem?.direction || '',
  educationId: props.curItem?.educationId || '',
  academicId: props.curItem?.academicId || '',
  sex: props.curItem?.sex || '',
  birthday: props.curItem?.birthday || '',
})
const rules = ref({
  name: { required: true, message: '请输入姓名'},
  phone: [{required: true, message: '请输入手机号'}, { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的手机号' }],
  code: {required: true, message: '请输入工号'},
  idcard: {pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请填写正确的身份证号'},
  email: [{ required: true, message: '请输入邮箱' },{ pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '邮箱格式不正确' }],
  roleIds: {required: true, message: '请选择角色'},
  identityCode: {required: true, message: '请选择身份'},
  departmentId: { required: true, message: '请选择学院(部)' },
  sex: {required: true, message: '请选择职称'},
  birthday: {required: true, message: '请选择出生日期'},
  educationId: {required: true, message: '请选择学历'},
  academicId: {required: true, message: '请选择学位'},
  titleId: {required: true, message: '请选择职称'},
  positionLevelId: {required: true, message: '请选择岗位级别'},
  subjectId: {required: true, message: '请选择一级学科'},
  organizationName: { required: true, message: '请输入所属单位' },
  direction: { required: true, message: '请输入研究方向' },
})

// 避开单选切换时的form校验
watch(()=> form.value.inside, (v)=> {
  if(v) {
    form.value.code = form.value.code2
    form.value.departmentId = form.value.departmentId2
  } else{
    form.value.code2 = form.value.code
    form.value.departmentId2 = form.value.departmentId
  }
})

// 新增
const { run: createAccount, loading } = useRequest(createAccountReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: () => {
      ElMessage({
        message: '新增成功',
        type: 'success',
      })
      emits('close', true)
   },
})

// 编辑
const { run: updateAccount, loading: uploadLoading } = useRequest(updateAccountReq, {
  // false 为自动执行
  manual: true,
  // 请求成功
  onSuccess: () => {
      ElMessage({
        message: '编辑成功',
        type: 'success',
      })
      emits('close', true)
   },
})
function submit(){
  formRef.value.validate((valid) => {
    if (valid) {
      if(form.value.inside){
        form.value.organizationName = '南昌交通学院'
      }
      if(!form.value.inside){
        form.value.code = form.value.code2
        form.value.departmentId = form.value.departmentId2 || ''
      }
      form.value.code2 = undefined
      form.value.departmentId2 = undefined
      form.value.birthday = formateDate(form.value.birthday).format('YYYY-MM-DD')
      if(props.editType === 1) {
        return createAccount(form.value)
      }
      if(props.editType === 2) {
        return updateAccount({
          id: props.curItem.id,
          ...form.value
        })
      }
      emits('close')
    }
  })
}
</script>

<template>
  <el-dialog
    v-model="props.visible"
    :title="`${props.editType === 0 ? '查看' : props.editType === 1 ? '新增' : '编辑'}用户`"
    width="600"
    :align-center="true"
    :close-on-click-modal="false"
    @close="emits('close')"
  >
    <div class="pt-[14px] pb-[4px] px-[24px] max-h-[70vh]">
      <el-form
        ref="formRef"
        :model="form"
        label-width="auto"
        :rules="rules"
        :disabled="props.editType === 0"
      >
        <el-form-item label="是否校内用户" prop="inside">
          <el-radio-group v-model="form.inside">
            <el-radio :value="true">是</el-radio>
            <el-radio :value="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model.trim="form.name" placeholder="请输入" maxlength="10" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model.trim="form.phone" placeholder="请输入" maxlength="11" />
        </el-form-item>
        <el-form-item v-if="form.inside" label="工号" prop="code">
          <el-input v-model.trim="form.code" placeholder="请输入" maxlength="20" />
        </el-form-item>
        <el-form-item v-if="!form.inside" label="工号" prop="code2">
          <el-input v-model.trim="form.code2" placeholder="请输入" maxlength="20" clearable />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="form.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idcard">
          <el-input v-model.trim="form.idcard" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="角色" prop="roleIds">
          <el-select v-model="form.roleIds" placeholder="请选择" :multiple="true">
            <el-option v-for="v in props.roleList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
          </el-form-item>
        <el-form-item label="身份" prop="identityCode">
          <el-select v-model="form.identityCode" placeholder="请选择" :multiple="true">
            <el-option v-for="v in identityCodeList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
          </el-form-item>
        <el-form-item v-if="form.inside" label="学院（部）" prop="departmentId">
          <el-select v-model="form.departmentId" placeholder="请选择" filterable>
            <el-option v-for="v in props.departmentList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择" filterable>
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            format="YYYY/M/D"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="学历" prop="educationId">
          <el-select v-model="form.educationId" placeholder="请选择" filterable>
            <el-option v-for="v in props.educationNameList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="学位" prop="academicId">
          <el-select v-model="form.academicId" placeholder="请选择" filterable>
            <el-option v-for="v in props.academicNameList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="职称" prop="titleId">
          <el-select v-model="form.titleId" placeholder="请选择">
            <el-option v-for="v in props.titleList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位类型" prop="positionTypeId">
          <el-select v-model="form.positionTypeId" placeholder="请选择" clearable>
            <el-option v-for="v in props.positionTypeList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="岗位级别" prop="positionLevelId">
          <el-select v-model="form.positionLevelId" placeholder="请选择">
            <el-option v-for="v in props.positionLevelList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="一级学科" prop="subjectId">
          <el-select v-model="form.subjectId" placeholder="请选择">
            <el-option v-for="v in props.subjectList" :key="v.value" :label="v.title" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!form.inside" label="所属单位" prop="organizationName">
          <el-input v-model.trim="form.organizationName" placeholder="请输入" maxlength="50" />
        </el-form-item>
        <el-form-item label="研究方向" prop="direction">
          <el-input v-model.trim="form.direction" placeholder="请输入" maxlength="50" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emits('close')">取消</el-button>
        <el-button type="primary" :loading="loading || uploadLoading" @click="submit">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.el-radio__input.is-disabled+span.el-radio__label,
.el-form-item .is-disabled .el-select__selected-item,
.el-form-item .is-disabled .el-input__inner,
.el-select__selection .el-tag--info{
  @apply: text-[#4E5969];
  -webkit-text-fill-color: #4E5969;
}
.el-date-editor.el-input{
  @apply: w-full;
}
.el-dialog__body{
  @apply: overflow-auto;
}
</style>